<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>市场情绪图</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.fixedBox{
				border: 5px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}			
			
			
			
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="DatePicker/WdatePicker.js"> </script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>
	<body>
		<div id="towrite" class="fixedBox" style = "display:none">
			<div id="title"></div>
			<div id="chart"></div>		
		</div>
				
		<script>
			var dt = "";
			var tt = "";
			var gt = "";
			var k = "0";
			window.onload = function() {
				var day = new Date();
				gt = day.getTime();			
				mymonth = day.getMonth()+1;
				myday = day.getDate();
				if(mymonth >= 10){mymonth = mymonth;}else{mymonth = "0" + mymonth;}
				if(myday >= 10){myday = myday;}else{myday = "0" + myday;}
				tt = day.getFullYear() + "-" + mymonth + "-" + myday;	
				dt = tt;
				changeStyle();	
				getSource(pn);					
			}		

			function time_range(beginTime, endTime) {
				var strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}

				var stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}

				var b = new Date();
				var e = new Date();
				var n = new Date();

				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					getSource(pn);					
					console.log(true)　　　　　　
					return true;				
				} else {
					console.log(false)
				    return false;     
				}
			}　　　
   　　　
			$(function() {
				setInterval(function() {
					if(k == 0){
						time_range("9:00","15:15")	
					}	
				},
				60000);
			})
			
			function changeStyle() {
				var div = document.getElementById("towrite");
				div.style.display = "block";
				div.style.left= "0px"; 				
				div.style.width= "98%";	
				div.style.height= "260px";		
				div.style.fontSize="12px";	
				//div.style.border = "1px solid #fff";
				
				var div = document.getElementById("title");				
				div.style.left= "0px"; 				
				div.style.width= "98%";	
				div.style.height= "30px";
				div.style.margin = "5px 0px 0px -10px";
				
				var div = document.getElementById("chart");						
				div.style.width= "98%";
				div.style.height= "200px";	
				//div.style.border = "1px solid #fff";				
			}
			
			Date.prototype.Format = function (fmt) {
				var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"h+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			};
			
			
			var pn = 100;
			function getSource(p) {
				if(p != pn){
					pn = p;
				}
				div = document.getElementById('title');
				var p1 = "<a href='javascript:void(0)' id='d50' onclick='getSource(" + "50" + ")'>" + "50日" + "</a>";	
				var p2 = "<a href='javascript:void(0)' id='d100' onclick='getSource(" + "100" + ")'>" + "100日" + "</a>";
				var p3 = "<a href='javascript:void(0)' id='d150' onclick='getSource(" + "150" + ")'>" + "150日" + "</a>";
				var p4 = "<a href='javascript:void(0)' id='d200' onclick='getSource(" + "200" + ")'>" + "200日" + "</a>";						
				div.innerHTML =  '<font size="3" style="color:#FFFF00;">市场情绪（ <font size="1" style="color:#00FFFF;">' + p1 + p2 + p3 + p4 + '</font>）</font>';			
				var aObj = document.getElementById('d' + p);				
				aObj.style.color = "#FFA07A"; 
					
				var url1 = "http://127.0.0.1:8880/w1/api/index.php?a=ChangeStatistics&apiv=w31&c=HomeDingPan"; 
				var url2 = "http://127.0.0.1:8881/w1/api/index.php?st=" + p + "&a=ChangeStatistics&apiv=w31&c=HisHomeDingPan"; 
				
				var res1 = [];
				$.ajax({
					type: "get",
					url: url1,
					dataType: "json",
					async : false,
					cache:false,
					timeout:3000,						
					success: function(data) {
						//alert(data)
						//alert(JSON.stringify(data))
						res1 = data.info;				
					}
				});
				
				if(k == 0){
					tt = res1[0].Day;						
					dt = tt;
				}
				//alert(tt)
				var res2 = [];
				$.ajax({
					type: "get",
					url: url2,
					dataType: "json",
					async : false,
					cache:false,
					timeout:3000,						
					success: function(data) {
						//alert(data)
						//alert(JSON.stringify(data))
						res2 = data.info;				
					}
				});
				var res = [];
				res = res1.concat(res2);

				//document.write(JSON.stringify(res));					
				
				function up(a,b){
					var aa = a.Day.replace(/-/g,"");
					var bb = b.Day.replace(/-/g,"");
					return aa - bb					
				}
				res.sort(up);					
				//document.write(JSON.stringify(arr1));
				echarts.init(document.getElementById('chart')).dispose();//删除之前绘画的实例 
				GetChart(res);				
				//document.getElementById("PriceDate").value = tt;				
			}
			
			function getParamValues1(name, arr) {
				var ret = []
				for (var i = 0, len = arr.length; i < len; i++) {
					ret.push(arr[i][name])
				}
				return ret
			}
			
		</script>
		<script>
			function GetChart(arr) {				
				var myChart = echarts.init(document.getElementById('chart'));
				
				var option = {
					animation: false, //取消动画效果
					title:{
						 left:'left',
						text: '',
						textStyle:{ //设置主标题风格
							color:'#FFFF00',//设置主标题字体颜色
							fontStyle:'normal',//主标题文字风格
							fontSize: 12
						}
					},
					tooltip: {   //提示框
						trigger: 'axis',
						<!-- backgroundColor: "#2D8CF0", //设置背景颜色 -->
						<!-- textStyle: { -->
						  <!-- color: "#000" //设置文字颜色 -->
						<!-- }, -->
						<!-- borderColor: "#2D8CF0", //设置边框颜色 -->
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#000'
							},
							crossStyle: {								
								textStyle:{ 
									color: '#fff'									
								}
							},							 
						},	
						formatter(params) {  //添加文字						
							var str = params[0].name + '<br />'						  
							params.forEach(item => {																							
								str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>' + item.seriesName + " : " + item.data + "<br />";
							})
							return str;							
						}
					},					
					grid: { // 边距
					  left: '2%',
					  right: '2%',
					  bottom: '15%',
					  top: '3%',
					  //containLabel: true  //grid 区域是否包含坐标轴的刻度标签
					},
	
					xAxis: [		//x轴设置		  
						{
							type: 'category',								
							data: getParamValues1('Day', arr),
							axisLine:{  //x轴坐标线设置
								lineStyle:{
									color:"#D3D3D3",  //x轴坐标线颜色
									width: 2   // 坐标轴线宽
								}
							},
							axisTick: {   //x轴刻度
								show:false, 
							},
							axisLabel:{	 //x轴标签设置						
								//rotate:45，//倾斜45°
								formatter:function(value){   //文字竖直显示
									//return value.split("2022").join("\n");
									value = value.replace(/-/g,'');
									return value.substr(0,4) + "\n" + value.substr(4,4);
								}, 
								textStyle:{  //x轴文字
									color:"#FFF"
								}
							},
							axisPointer: {
								type: 'shadow',								
							}
						}
					],

					yAxis: [  //y轴
						{
							type: 'value',
							min: function(value) {//取最小值向下取整为最小刻度									
								return Math.floor(value.min)
							},
							max: function(value) {//取最大值向上取整为最大刻度
								if(value.max < 0){
									return  0 
								}else{
									return  Math.ceil(value.max) 
								}									
							},
							interval: function (value) { // 刻度间隔
								if(value.max < 0){
									return  Math.ceil(value.min) 
								}else{
									return  Math.ceil(value.max)
								}									
							},								
							splitLine:{ //y轴网格线									
								show:true,
								lineStyle: { 									
									color: '#D3D3D3', 
									width: 1,    
									type: 'dotted', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true, 									
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									width: 2,    // 坐标轴线宽
									type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisTick: {   //y轴刻度
								show:false, 
							},
							axisLabel: {  //y轴标签设置
								show: true,
								color: '#fff',									
								formatter: function (value){
									if(value != 0){							  
										return value
									}else{
										return 0
									}
								}
							}
						},
					],
					
					series: [						
						{
							name: '综合强度',
							data: getParamValues1('strong', arr),
							type: 'line',								
							//symbol: 'circle',//拐点样式
							//symbolSize: 18,//拐点大小
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,//折线宽度
								  color: "#FFA500"//折线颜色
								},
								color: '#FFA500',//拐点颜色
								borderColor: '#FFA500',//拐点边框颜色
								borderWidth: 1//拐点边框大小
							  },
							  emphasis: {
								color: '#FFA500'//hover拐点颜色定义
							  }
							},
						}
					]
				}					
				myChart.setOption(option);
			}
		</script>
		
	</body>
</html>